<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>

  <body>
    <script src="./jquery-1.11.3.js"></script>
    <script>
      /* 
      如何解决回调地狱问题？
      */
      // http://kumanxuan1.f3322.net:8809/index/banners/travel
      // http://kumanxuan1.f3322.net:8809/strategies/themes
      // http://kumanxuan1.f3322.net:8809/travels/query

      // 第一个页面渲染完成之后。再做第二个页面的渲染
      // 第二个页面渲染完成之后。再做第三个页面的渲染

      let p1 = new Promise((resolve, reject) => {
        $.ajax({
          url: "http://kumanxuan1.f3322.net:8809/index/banners/travel",
          type: "GET",
          success(res) {
            resolve(res);
          },
          error(err) {
            reject(err);
          }
        })
      })

      let p2 = new Promise((resolve, reject) => {
        $.ajax({
          url: "http://kumanxuan1.f3322.net:8809/strategies/themes",
          type: "GET",
          success(res) {
            resolve(res);
          },
          error(err) {
            reject(err);
          }
        })
      })

      let p3 = new Promise((resolve, reject) => {
        $.ajax({
          url: "http://kumanxuan1.f3322.net:8809/travels/query",
          type: "GET",
          success(res) {
            resolve(res);
          },
          error(err) {
            reject(err);
          }
        })
      })


      p1.then((res) => {
        console.log(res);
        return p2; //相当于修改了后面的then的指向
      }).then(
        res => {
          console.log(res);
          return p3;
        }
      ).then(
        res => console.log(res)
      )
    </script>
  </body>

</html>